<template>
<div class="page_modal">
    <div class='selectPeople page '>
        <div class="page-title">选择整改人</div>
        <div style="flex:1;position:relative;">
          <div class="search-box">
              <search :placeholder="'搜索员工姓名'" @exportKey=search @del=del></search>
          </div>
          <div class="content page_bd">
              <div class="list-selection-warp">
                  <div class="title">
                      <h3>{{title}}</h3>
                  </div>
                  <div class="list-selec-data" ref="wrapper">
                      <div class="list-box">
                        <div class="selec clearfix" :class="{'show':val.show}" v-for="(val,key) in listData" :key="key">
                            <div class="selec-title" @click="listShow(val)">
                                <p class="more-hide">
                                    <i class="iconfont sel" :class="val.isSelect ? 'icon-select-copy' : 'icon-Ellipse'" @click.stop="departSel(val)"></i>
                                    <span :class="{childSel:val.childSel}"> {{setTitle(val.deptName)}}</span>

                                </p>
                                <i class="iconfont right" :class="val.show ? 'icon-zhankai' : 'icon-gengduo'"></i>
                            </div>
                        </div>
                      </div>
                  </div>
              </div>
          </div>
          <no-list v-show="listData.length === 0"></no-list>
          <div class="footer">
              <blue-button :text=blueButtonText @btnClick=btnClick></blue-button>
          </div>
        </div>
    </div>
</div>
</template>

<script>
import noList from '@/components/noList.vue'
import Search from '@/components/search.vue'// 引用Search组件
import blueButton from '@/components/blueButton.vue'// 引用blueButton组件
import BScroll from 'better-scroll'
export default {
    components: {
        Search, blueButton, noList
    },
    data () {
        return {
            blueButtonText: '确定',
            title: '',
            allDeparts: [], // 所有的部门数据
            listData: [], // 当前展示的列表数据
            inSearch: false, // 当前正处理搜索部门状态
            pageIndex: 0,
            pageSize: 12
        }
    },
    filters: {
        limitMaxLength (str, len) {
            if (str.length < len) {
                return str
            }
            return '...' + str.slice(-len)
        }
    },
    mounted () {
        this.getAllDepartments();
    },
    methods: {
        setTitle (v) {
            // console.log(v);
            let len = v.length
            if (len <= 20) {
                return v
            } else {
                return '...' + v.substring(len, len - 19)
            }
        },
        departSel () {

        },
        listShow () {

        },
        search () {

        },
        del () {

        },
        // 获取部门信息
        async getAllDepartments () {
            let res = await this.$Geting('/scrollData.json', { name: '' })
            if (res.code === '0') {
                let allDeparts = res.data;
                allDeparts.map(item => {
                    item.show = false
                    item.isSelect = false
                    item.child = [] // 子节点
                    item.list = []; // 部门下的岗位列表
                    item.loadedChild = false
                    return item
                })
                this.allDeparts = allDeparts
                this.listData = this.getPageData();
                this.title = this.listData[0] ? this.listData[0].deptName : ''
                this.$nextTick(() => {
                    this.scroll = new BScroll(this.$refs.wrapper, {
                        pullUpLoad: true
                    })
                    this.scroll.on('pullingUp', () => {
                        let totalPage = Math.ceil(this.allDeparts.length / this.pageSize)
                        console.log(totalPage)
                        if (this.pageIndex < totalPage -1) {
                            this.pageIndex = this.pageIndex + 1
                            console.log('当前页', this.pageIndex, totalPage)
                            this.loadNextPage()
                            this.scroll.finishPullUp()
                            this.scroll.refresh()
                        }                        
                    })
                })
            }
        },
        loadNextPage () {
            let nextPageData = this.getPageData()            
            this.listData = [...this.listData, ...nextPageData]
            console.log('xxxxxxxxxxxxx', this.listData)
        },
        getPageData () {
            return this.allDeparts.slice(this.pageIndex * this.pageSize, (this.pageIndex + 1) * this.pageSize);
        },
        btnClick () {

        }
    }
}
</script>

<style lang="scss" scoped>
.page_modal {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
  width:100%;
  height:100%;
  z-index:99;
}
.page-title {
    width: 100vw;
    height: .88rem;
    font-size: .32rem;
    line-height: .88rem;
    text-align: center;
    color: #fff;
    background: #303642;
}
/* 这里面写样式 */
.selectPeople {
    background-color: #fff;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f2f2f4;
    .search-box {
        position: absolute;
        top: 0;
        width: 100%;
        height: 1.04rem;
        z-index: 10;
    }
    .content {
        position: absolute;
        top: 1.04rem;
        width: 100%;
        bottom: 1.2rem;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        .lis {
            position: relative;
            height: 1.58rem;
            display: flex;
            padding: 0.3rem 0.3rem 0.3rem 0.6rem;
            i {
                font-size: 0.3rem;
                line-height: 1rem;
            }
            .imgs {
                border-radius: 0.1rem;
                img {
                    border-radius: 0.1rem;
                    width: 1rem;
                    height: 1rem;
                    vertical-align: middle;
                }
            }
            .person {
                padding: 0.12rem 0.3rem;
                .name {
                    font-size: 0.3rem;
                    color: #000;
                }
                .department {
                    padding-top: 0.2rem;
                    font-size: 0.24rem;
                    color: #777e8c;
                }
            }
        }
    }
}
.list-selection-warp {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.list-selection-warp i {
    font-size: 0.3rem;
}
.list-selection-warp .sel {
    margin-right: 0.1rem;
}
.list-selec-data {
    padding-left: 0.3rem;
    flex: 1;
    overflow: hidden;
}
.childSel {
    color: #3397ff !important;
}
.list-selec-data .selec {
    border-bottom: 1px solid #dddee3;
}
.selec .selec-title .more-hide {
    float: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.selec .selec-title .right{
    float: right;
    margin-right: .45rem;
    padding-right: 0;
}
.list-selec-data .selec li {
    border-top: 1px solid #dddee3;
    height: 1.58rem;
    line-height: 1.58rem;
    color: #000;
    font-size: 0.3rem;
}
.selec .selec-title p {
    float: right;
    padding-right: 0.3rem;
    line-height: 0.88rem;
}
.selec .selec-title {
    position: relative;
    height: 0.88rem;
    line-height: 0.88rem;
    color: #000;
    font-size: 0.3rem;
}
.list-selection-warp .title {
    line-height: 0.95rem;
    height: 0.95rem;
    // background-color: #f2f2f4;
    border: 1px solid #dddee3;
    padding-left: 0.3rem;
    padding-top: 0.3rem;
    box-sizing: border-box;
}
.list-selection-warp .title h3 {
    height: 0.3rem;
    line-height: 0.3rem;
    font-size: 0.3rem;
    color: #010101;
    padding-left: 0.12rem;
    border-left: 0.06rem solid #3397ff;
}
.list-selection-warp ul {
    width: 100%;
    height: auto;
    overflow: hidden;
}
.selec.show .icon {
    transform: rotate(90deg);
}
.department-name {
    padding-left: 0.3rem;
    height: 0.88rem;
    line-height: 0.88rem;
    border-top: 1px solid #dddee3;
    .right {
        margin-right: 0.45rem;
        padding-right: 0;
    }
}
.icon-select-copy {
    color: #3397ff;
}
.footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    border-top: 1px solid #dddee3;
}
</style>